import { Tabs } from 'antd';
import { Tree } from 'antd';
const { TabPane } = Tabs;
const { TreeNode } = Tree;

const MyInput = ({ value = '', onChange }) => (
    <input value={value} onChange={onChange}/>
)

// function callback(key) {
//     console.log(key)
// }

export default class Demo extends React.Component {
    state = {
        text: '',
        activeKey: '1',
        expandedKeys: [],
    }

    onTextChange = (event) => {
        this.setState({
            text: event.target.value
        })
    }

    onTextReset = () => {
        this.setState({
            text: ''
        })
    }

    onTabChange = (activeKey) => {
        this.setState({
            activeKey
        })
    }

    onExpand = (expandedKeys) => {
        this.setState({
            expandedKeys
        })
    }

    onSelect = (selectedKeys) => {
        const { expandedKeys } = this.state
        const key = selectedKeys[0]
        if (expandedKeys.includes(key)) {
            this.setState({
                expandedKeys: expandedKeys.filter(k => k !== key)
            })
        } else {
            this.setState({
                expandedKeys: [...expandedKeys, key]
            })
        }
    }

    render () {
        return (
            <div>
                <MyInput value={this.state.text} onChange={this.onTextChange} />
                <button onClick={this.onTextReset}>Reset</button>

                <Tabs activeKey={this.state.activeKey} onChange={this.onTabChange}>
                    <TabPane tab="Tab 1" key="1">
                        Content of Tab Pane 1
                    </TabPane>
                    <TabPane tab="Tab 2" key="2">
                        Content of Tab Pane 2
                    </TabPane>
                    <TabPane tab="Tab 3" key="3">
                        Content of Tab Pane 3
                    </TabPane>
                </Tabs>

                <Tree
                    expandedKeys={this.state.expandedKeys}
                    onExpand={this.onExpand}
                    onSelect={this.onSelect}
                >
                    <TreeNode title="parent" key="0-0">
                        <TreeNode title="leaf" key="0-0-0" />
                        <TreeNode title="leaf" key="0-0-1" />
                    </TreeNode>
                </Tree>
            </div>
        )
    }
}